<template>
  <el-dialog v-model="dialogVisible" :title="props.title" top="48px" :width="width">
    <el-form :model="form" :rules="rules" ref="ruleFormRef">
      <el-alert
        class="mb-5"
        type="warning"
        description="非直接上级安排的突击工作，如培训/学习/出差途中，以及员工自身问题导致工作未及时完成突击等情况不予调休申请，仅作突击记录统计。"
        show-icon
      >
      </el-alert>
      <el-form-item prop="approvalReason">
        <el-input type="textarea" :rows="3" placeholder="请输入审核意见" v-model="form.approvalReason"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button @click="onApproval('2')"> 不通过(仅记录) </el-button>
        <el-button type="primary" @click="onApproval('1')"> 审核通过 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="SelectIcon">
import { FormInstance } from "element-plus";
import { ref, reactive } from "vue";

export interface SelectProps {
  title: string;
  width: string;
}

let props = withDefaults(defineProps<SelectProps>(), {
  width: "480px",
  title: "请审核"
});

const rules = reactive({
  approvalReason: [{ required: true, message: "请输入审核意见" }]
});

const form = reactive({
  _id: undefined,
  approvalReason: undefined,
  state: "0"
});

// open Dialog
const dialogVisible = ref(false);

// 选择图标(触发更新父组件数据)
const emit = defineEmits<{
  change: [value: { [key: string]: any } | undefined];
}>();
const ruleFormRef = ref<FormInstance>();
const onApproval = (state: string) => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    dialogVisible.value = false;
    form.state = state;
    emit("change", form);
  });
};

// 接收父组件传过来的参数
const openDialog = data => {
  form._id = data._id;
  dialogVisible.value = true;
};

defineExpose({
  openDialog
});
</script>

<style scoped lang="scss"></style>
